<template>
	<div class="author">
		<van-nav-bar title="作者界面" left-text="返回" left-arrow @click-left="ret()" class="nav" />
		<!-- <h1>作者详情页</h1> -->
		<div class="bac">
			<div class="all">
				<p>
					{{this.$route.query.author}}
					<span @click="adda()"><van-icon name="add-o" size="20" class="icon-det"/>{{font}}</span>
				</p>
			</div>
		</div>
		<div class="works" v-for="list in mylist">
			<div class="time">
				<span class="day">{{list.sub_day}}</span>
				<span class="ym">{{list.sub_week}}<br />{{list.sub_yymm}}</span><br />
			</div>
			<span class="font">{{list.u_font}}</span><br>
			<div class="com">
				<van-icon name="eye-o" size="20" class="icon-detail"/>&nbsp;{{list.eye_count}}
				<van-icon name="chat-o" size="20" @click="show = true;sel(list)" class="chat"/>&nbsp;{{list.sum_com}}
				<van-icon name="good-job-o" size="20" class="icon-detail" @click="add(list)"/>&nbsp;{{list.sum_like}}
				<van-action-sheet v-model="show" :title="'共有'+ccc+'条评论'" class="vans" @click-overlay="clo()">
					<div class="cont" v-for="cc_list in c_list">
					  <span class="name1">{{cc_list.c_username}}</span>
					  <span class="content1">{{cc_list.c_font}}</span>
					  <hr>
					</div>
					
				  <div class="but">主子，我也是有底线的</div>
				  <div class="ip">
					  <input type="text" placeholder="写评论" v-model="c_font"><span class="aa" @click="subb(list)">发送</span>
				  </div>
				</van-action-sheet>
			</div>
		</div>
	</div>
</template>

<script>
	import {Toast} from 'vant';
	import axios from 'axios';
	var querystring = require('querystring');
	export default{
		name:'author',
		data(){
			return{
				font:'',
				mylist:[],
				ccc:'0',
				show:false,
				mine:'',
				username:'',
				w_username:'',
				w_font:'',
				c_font:'',
				c_list:[]
			}
		},
		methods:{
			ret(){
				this.$router.go(-1)			//返回上一级
			},
			sel(list){								//查询对应评论的方法
				// alert(list.sub_day)
				this.w_username=list.username
				this.w_font=list.u_font
				// console.log("同时触发事件执行成功")
				var param={
					'w_username':this.w_username,
					'w_font':this.w_font
				};
				param = querystring.stringify(param);
				axios.post(this.$api+'/comment/selc',param).then((response)=>{
					// console.log(response.data);
					if(response.data.success==false){
						Toast("暂无评论");
					}else{
						this.c_list=response.data.detail.reverse()
						this.ccc=this.c_list.length
						Toast('存在评论，请查看')
					}
				}).catch((error)=>{
					console.log(error)
				})
			},
			add(list){
				console.log("触发点赞方法")
				// console.log(list.username+list.u_font)
				this.mine=JSON.parse(localStorage.getItem('data-mine'));		//获取登陆人的信息
				var param={
					'w_username':list.username,
					'w_font':list.u_font,
					'c_username':this.mine.detail.username,
				};
				param = querystring.stringify(param);
				axios.post(this.$api+'/like/sellike',param).then((response)=>{
					console.log(response.data)
					if(response.data.success=true){			//点赞成功
						Toast(response.data.msg)
						this.aa()
					}else{									//点赞失败
						Toast(response.data.msg)
					}
				}).catch((error)=>{
					console.log(error);
				})
			},
			adda(){			//在这个方法中调接口就好
				if(this.font=="添加关注"){
			          this.mine=JSON.parse(localStorage.getItem('data-mine'))
			          console.log(this.mine.detail.username)
			          var param={
			             'username':this.mine.detail.username,
			             'a_username':this.$route.query.author
			          }
			          if(param.username==param.a_username){
			            Toast('不允许本人关注')
			          }else{
			            param=querystring.stringify(param)
			            axios.post(this.$api+'/Attention/add',param).then((response)=>{
							this.font="取消关注",
							console.log('触发方法')
							console.log(response.data)
			            }).catch((error)=>{
			              console.log(error);
			            })
			          }
				}else if(this.font="取消关注"){
					this.font="添加关注",
			        this.mine = JSON.parse(localStorage.getItem('data-mine'))
			        console.log(this.mine.detail.username)
			        var param={
						'username':this.mine.detail.username,
			            'a_username':this.$route.query.author
					}
			        param=querystring.stringify(param)
			        axios.post(this.$api+'/Attention/del',param).then((response)=>{
			            console.log('触发方法')
			            console.log(response.data)
			        }).catch((error)=>{
			            console.log(error);
			        })
				}
			},
			subb(list){
				this.mine=JSON.parse(localStorage.getItem('data-mine'));//提交评论
				let yy = new Date().getFullYear();		//获取当前年份
				let mm = new Date().getMonth()+1;		//获取当前月份
				let dd = new Date().getDate();			//获取当前日
				let wk = new Date().getDay();  			//会根据当前是星期几，返回对应的数字：0(周日)-6(周六)
				let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
				let yymm=yy+'年'+mm+'月';
				var param={
					'w_username':this.w_username,
					'w_font':this.w_font,
					'c_username':this.mine.detail.username,
					'c_font':this.c_font,
					'c_day':dd,
					'c_yymm':yymm
				};
				param = querystring.stringify(param);
				axios.post(this.$api+'/comment/subcm',param).then((response)=>{
					// console.log('发送后返回的数据'+response.data)
					this.c_font=''
					if(response.data.success==true){
						Toast('评论成功');
						// this.sel(list).refresh();
					}else{
						Toast('评论失败')
					}
				}).catch((error)=>{
					console.log(error);
				}),
				Toast('发送按钮');
			},
			clo(){			//为了防止c_list的错乱
				console.log('成功触发方法')
				this.c_list=''
				this.ccc='0'
			},
			find(){
				this.mine=JSON.parse(localStorage.getItem('data-mine'))
				var param={
				   'username':this.mine.detail.username,
				   'a_username':this.$route.query.author
				}
				param = querystring.stringify(param);
				axios.post(this.$api+'/Attention/find',param).then((response)=>{
					this.font=response.data.msg;
					console.log(response.data.msg);
				}).catch((error)=>{
					console.log(error);
				})
			}
		},
		created(){
			var param={
				username:this.$route.query.author
			}
			param = querystring.stringify(param);
			axios.post(this.$api+'/mywork/selwork',param).then((response)=>{
				console.log(response.data)
				this.mylist=response.data.reverse()
			}).catch((error)=>{
				console.log(error)
			});
			this.find()
		},
	}
</script>

<style scoped>
	.author{
		/* background-color: #FAFAFA; */
		background-image: url('~@/assets/sky.jpg');
		padding-top: 45px;
		height: 100%;
		padding-bottom: 10px;
	}
	.nav{
		position: fixed;
		top: 0px;
		width: 100%;
	}
	.one{
		display: inline-block;
		margin-right: 100px;
	}
	.all{
		background-color: white;
		margin:auto;
		width: 250px;
		height:60px;
		border: 1px solid #FFD01E;
		border-radius: 50px;
		font-size: 18px;
		font-weight: bold;
	}
	.chat{
		margin-top: -5px;
		vertical-align: middle;
		margin-left: 170px;
	}
	.com{
		margin-top: 10px;
	}
	.bac{
		/* background-image: url('~@/assets/sky.jpg'); */
		background-position: 20px 20px;
		height: 200px;
		padding-top: 20px;
	}
	.icon-detail{
		margin-top: -5px;
		vertical-align: middle;
	}
	.icon-det{
		margin-top: -5px;
		vertical-align: middle;
		margin-left: 60px;
	}
	.works{
		padding:10px;
		background-color: rgba(255,255,255,.5);
		margin:10px;
		border-radius: 10px;
	}
	.font{
		margin: 0px 20px;
	}
	.time{
	 	height: 50px;
		margin-top: 0px;
		width: 140px;
	}
	.day{
	 	width:50px;
		height: 50px;
		display: inline-block;
		padding-top: 5px;
		color:#FFD01E ;
		font-size: 35px;
	}
	.ym{
		
		display: inline-block;
		padding-top: 10px;
		font-size: 10px;
	}
	.vans{
		font-size:15px;
		height: 300px;
		margin-bottom: 0px;
	}
	.ip{
		background-color: white;
		position: fixed;
		bottom: 0px;
		left: 10px;
	}
	input{
		width: 240px;
		height: 30px;
		margin-bottom: 20px;
		margin-left: 20px;
		color: grey;
		border:0px;
		background-color: #FAFAFA;
	}
	.aa{
		display: inline;
		margin-left: 15px;
		/* background-color: #0570DB; */
	}
</style>
